<!-- 20210301 -->
<template>
	<view class="mall-buy-bottom-bar-cn">
		<view class="jc-footer-safe bg-ff">
			<!-- 购买条 -->
			<view class="padding-lr-30 height-footer flex align-center">
				<!-- 图标 -->
				<view class="flex-one padding-right-30 flex justify-between">
					<!-- 客服图标 -->
					<view class="flex flex-direction align-center" @tap="account">
						<text class="tyIcon-service line-height-50 text-50 text-4d"></text>
						<text class="text-18 text-33">客服</text>
					</view>
					<!-- 收藏图标 -->
					<view class="flex flex-direction align-center" @tap="collectClick">
						<text class="line-height-50 text-50"
							:class="isCollect == true ? 'tyIcon-star-fill text-main' : 'tyIcon-star-line text-4d'"></text>
						<text class="text-18 text-33">{{isCollect == true ? '已收藏' : '收藏'}}</text>
					</view>
					<view class="position-relative flex flex-direction align-center" @click="cart">
						<text class="tyIcon-cart-line line-height-50 text-54 text-4d"></text>
						<text class="text-18 text-33">购物车</text>
						<!-- 购物车角标 -->
						<view class="cart-subscript flex justify-center align-center" v-if="cartTypeNumber != 0">
							{{cartTypeNumber}}
						</view>

					</view>
				</view>
				<view class="flex align-center">
					<view class="cart-btn width-200 line-height-80 bg-auxiliary text-center text-26 text-ff"
						@tap="buy(1)">加入购物车
					</view>
					<view class="buy-btn width-200 line-height-80 bg-main text-center text-26 text-ff"
						@tap="buy(2)">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isCollect: {
				type: Boolean,
				default: false
			},
			cartTypeNumber: {
				type: [String, Number],
				default: 20
			}
		},
		methods: {
			account() {
				this.$emit('account')
			},
			collectClick() {
				this.$emit('collect')
			},
			cart() {
				this.$emit('cart')
			},
			buy(type) {
				this.$emit('buy', {
					type: type
				})
			},
		}
	}
</script>

<style scoped>
	/* 购物车角标 */
	.cart-subscript {
		position: absolute;
		top: 0rpx;
		right: -10rpx;
		padding: 0 5rpx;
		min-width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		background: var(--main);
		border-radius: 15rpx;
		font-size: 20rpx;
		color: #fff;
	}

	/* 加入购物车按钮 */
	.cart-btn {
		border-radius: 40rpx 0 0 40rpx;
	}

	/* 立即购买按钮 */
	.buy-btn {
		border-radius: 0rpx 40rpx 40rpx 0;
	}
</style>